<template>
	<view>
		<!-- 各类人员构成 -->
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">各类人员构成</view>
			</view>
			<view class="qiun-charts qiun-rows">
				<canvas canvas-id="personnel" id="personnel" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
				<view class="qiun-bg-white charts-right">
					<view>
						<block v-for="(item, index) in PersonnelList.series" :key="index">
							<view class="qiun-rows legend-itme">
								<view class="legend-itme-point" :style="{'background-color':item.color}"></view>
								<view class="legend-itme-text">{{item.name}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<!-- 医生构成 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">医生构成</view>
		</view>
		<view class="qiun-charts qiun-rows">
			<canvas canvas-id="physician" id="physician" class="charts-pie" @touchstart="touchColumn" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
			<view class="qiun-bg-white charts-right">
				<view>
					<block v-for="(item, index) in PhysicianList.series" :key="index">
						<view class="qiun-rows legend-itme">
							<view class="legend-itme-point" :style="{'background-color':item.color}"></view>
							<view class="legend-itme-text">{{item.name}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var Personnel = null;
	var Physician = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				PersonnelList: {
					series: [{
						"name": "护士",
						"data": 20
					}, {
						"name": "技师",
						"data": 30
					}, {
						"name": "医生",
						"data": 25
					}, {
						"name": "其他",
						"data": 25
					}]
				},
				PhysicianList: {
					series: [{
						"name": "副主任医师",
						"data": 20
					}, {
						"name": "主任医师",
						"data": 30
					}, {
						"name": "主治医师",
						"data": 25
					}, {
						"name": "住院医师",
						"data": 25
					}]
				},
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(550)
			this.cHeight = uni.upx2px(500)
			this.refreshList();
		},
		methods: {
			refreshList() {
				_this.PersonnelComposition("personnel", this.PersonnelList)
				_this.PhysicianComposition("physician", this.PhysicianList)
			},

			// 各类人员构成
			PersonnelComposition(canvasId, chartData) {
				Personnel = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					}
				})
			},

			// 医生构成
			PhysicianComposition(canvasId, chartData) {
				Physician = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: false,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				})
			},
			// 触摸
			touchColumn(e) {
				if (e.target.id === "personnel") {
					Personnel.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id === "physician") {
					Physician.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return item.name + ':' + item.data.value
							} else {
								return item.name + ':' + item.data
							}
						}
					})
				}
			},

			// 触摸移动
			moveLineA(e) {
				Hospitalization.scroll(e)
			}
		},


	}
</script>

<style scoped lang="less">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts-pie {
		width: 550upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts-right {
		display: flex;
		align-items: center;
		width: 250upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.legend-itme {
		width: 200upx;
		margin-left: 30upx;
		height: 50upx;
		align-items: center;
	}

	.legend-itme-point {
		width: 20upx;
		height: 20upx;
		margin: 15upx;
		border: 1px solid #FFFFFF;
		border-radius: 20upx;
		background-color: #000000;
	}

	.legend-itme-text {
		height: 50upx;
		line-height: 50upx;
		color: #666666;
		font-size: 26upx;
	}
</style>
